<template>
  <el-upload
    class="avatar-uploader"
    action="#"
    :list-type="listType"
    :auto-upload="autoupload"
    :show-file-list="showfile"
    ref="imgUpload"
    :limit="limit"
    :before-upload="beforeAvatarUpload"
    :multiple="multiple"
    :file-list="fileList"
    :on-exceed="handleExceed"
    :on-remove="removeFile"
    :on-preview="handlePreview"
    :http-request="upLoadFile"
  >
    <img v-if="picUrl && !listType" :src="picUrl" class="avatar" />
    <div v-if="picUrl && !listType" class="el-upload-list__item-actions">
      <span class="el-upload-list__item-preview" @click.stop="handlePreview">
        <i class="el-icon-zoom-in"></i>
      </span>
      <span
        v-if="picUrl"
        class="el-upload-list__item-preview"
        @click.stop="removeFile"
      >
        <i class="el-icon-delete"></i>
      </span>
    </div>
    <i v-else class="el-icon-circle-plus-outline avatar-uploader-icon"></i>
    <div slot="tip" class="el-upload__tip">
      (图片格式仅限jpg、png、gif，图片大小2M以内)
    </div>
  </el-upload>
</template>
<script>

export default {
  name: "imageUpload",
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      isJPGorPNG: true,
      fileList: [],
      showfile: false,
      autoupload: true,
      limit: 5,
      multiple: false,
    };
  },
  props: {
    picUrl: {
      type: String,
      default: "",
    },
    listType: {
      type: String,
      default: "",
    },
    deleFileInfo: {
      type: Function,
    },
    uploadFile: {
      type: Function,
    },
  },
  watch: {
  },
  computed: {
  },
  async created() {
    
    if (this.listType) {
      //多张
      this.showfile = true;
      this.autoupload = true;
      this.multiple = true;
    } else {
      this.limit = 1;
    }
    this.fileList = [];
  },
  methods: {
    beforeUpload(file, fileList) {
      
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //预览
    handlePreview() {
      window.open(this.picUrl);
    },
    //图片上传之前校验格式
    beforeAvatarUpload(file) {
      
      this.isJPGorPNGorGif =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!this.isJPGorPNG) {
        this.$message.error("只能上传 JPG、PNG或GIF格式的图片!");
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
      }
      return this.isJPGorPNG && isLt2M;
    },
    //超出图片上传个数调用
    handleExceed() {
      this.$message.warning(`仅能上传一张图片，请删除后重新上传`);
    },

    //文件列表移除文件时的钩子
    removeFile(file, fileList) {
      
      if (this.isJPGorPNG) {
        this.deleFileInfo(file.uid)
          .then((res) => {
            if (res.code == "200") {
              this.$message.success("删除成功");
              this.$emit("update:picUrl", "");
            } else {
              this.$message.error("删除失败");
            }
          })
          .catch((res) => {
            this.$message.error("删除失败");
          });
      }
      this.fileList = []; //删除要上传文件后清空
    },
    //上传文件
    upLoadFile(file, fileList) {
      //上传之前先清空一下
      // this.fileList = [];
      
      let uploadData = this.getUploadData(file);
      
      this.uploadFile(uploadData)
        .then((res) => {
          
          if (res != "undefined" && res.length > 0) {
            this.$emit("update:picUrl", res[0].url);
          }
        })
        .catch((res) => {
          this.$message.error("上传失败");
        });
    },
    getUploadData(param) {
      let uploadData = new FormData();
      uploadData.append("file", param.file); // 文件对象
      return uploadData;
    },
  },
};
</script>

<style lang="scss" scoped>
// @import "@/styles/element-variables.scss";
.avatar-uploader {
  >>> .el-upload__tip {
    margin-top: 0px;
    font-size: 10px;
    line-height: 20px;
  }

  >>> .el-upload {
    // @include border_color2("up-img-box-color");
    // @include background_color("up-img-box-bg");
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  >>> .el-upload-list__item {
    width: 100px;
    height: 72px;
    // @include border_color2("up-img-box-color");
    // @include background_color("up-img-box-bg");
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  >>> .el-upload-list {
    position: relative;
    overflow: hidden;
  }
  >>> .el-upload--picture-card {
    width: 100px;
    height: 72px;
    line-height: 72px;
    text-align: center;
  }
  >>> .el-upload:hover {
    border-color: #409eff;
  }
  >>> .el-upload-list:hover {
    border-color: #409eff;
  }
  >>> .avatar-uploader-icon {
    font-size: 28px;
    color: #dcdfe6;
    width: 100px;
    height: 72px;
    line-height: 72px;
    text-align: center;
  }
  >>> .avatar {
    width: 100px;
    height: 72px;
    display: block;
  }

  >>> .el-upload-list__item-actions {
    width: 100px;
    height: 72px;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.4);
  }
  >>> .el-upload-list__item-preview {
    display: inline-block;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  >>> .el-icon-zoom-in:before,
  .el-icon-delete:before {
    font-size: 20px;
    color: #fff;
  }

  >>> .el-upload:hover .el-upload-list__item-actions {
    visibility: visible;
    transition: 1s;
    z-index: 200;
  }
  >>> .el-upload-list__item:hover .el-upload-list__item-actions {
    visibility: visible;
    transition: 1s;
    z-index: 200;
  }
}
</style>
